<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>组件注册</h1>
    <my-component></my-component>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;
    
    const app = createApp({
      data() {
        return {
          count: 10
        }
      },
      methods: {},
      components: {}
    })
    
    // 全局创建组件
    app.component(
      // 注册的名字
      'MyComponent',
      // 组件的实现
      {
        template: `
          <main>这是内容</main>
        `
      }
    )

    app.mount("#app")
  </script>
</body>
</html>